<template>
 <div class="layout">
    
    
     <el-row class="tac" >

    <el-menu
       router
      background-color="skyblue"
      class="el-menu-vertical-demo"
      :default-active="$route.path"
      @open="handleOpen"
      @close="handleClose"
      :unique-opened="true"
      >
      <slider-item v-for="  item in $store.state.routeList " :key="item.path " :subMenu="item"></slider-item>
      
</el-menu>
  </el-row >

    <div class="page-content">

     <nuxt style="flex:1;"></nuxt>
    </div>

 </div>
</template>

<script>
import SliderItem from '../components/SliderItem.vue'


    export default {
      components:{ SliderItem},
      data(){ 


          return{ 
           
            

            menu:''
          }
      }, 
      created(){ 
        console.log(this.$store.state)
      
      },
    
      
      methods:{ 
            handleOpen(key, keyPath) {
            
              console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },


     

      }
    }
</script>

<style   scoped>
*{ 
    margin: 0;
    padding: 0;
}
.layout{ 
    position: fixed;

    height: 100%;
    width: 100%;
    display: flex;
}
.tac{ 
    height: 100%;
}
.el-menu-vertical-demo{ 
    height: 100%;
    width: 200px;
}
.page-content{ 
    padding: 20px;
    flex: 1;
}
</style>